<template>
  <el-container class="">
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">
        <el-input v-model="sousuo"
                  style="width: 240px"
                  placeholder="输入宠物名字或ID"
                  prefix-icon="Search"
                  clearable />
        <p class="but sousuo"
           @click="search()">搜索</p>
        <p class="but sousuo"
           @click="chongzhi()">重置</p>
        <p class="but tian"
           @click="add()">添加</p>
      </div>
    </el-header>

    <el-main>
      <el-scrollbar>
        <el-table :data="currentPageData "
                  empty-text="暂无数据">
          <el-table-column prop="pet_id"
                           label="宠物ID"
                           width="140" />
          <el-table-column label="图片"
                           width="240">
            <template #default="scope">
              <img :src="scope.row.image"
                   alt="宠物图片"
                   style="width: 150px; height: 80px; ">
            </template>
          </el-table-column>
          <el-table-column prop="petname"
                           label="宠物名字"
                           width="180" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small"
                         @click="handleEdit(scope.row.pet_id)">编辑</el-button>
              <el-button size="small"
                         type="danger"
                         @click="handleDelete(scope.row.pet_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <!-- 分页器 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   background
                   :page-size="pageSize"
                   layout="prev, pager, next"
                   :total="userlist.length">
    </el-pagination>
    <!-- 宠物信息修改弹出层 -->
    <el-dialog v-model="centerDialogVisible"
               width="500"
               center
               @close="cha"
               :close-on-click-modal="false">

      <div class="pets">
        <div class="petid wenzi">宠物ID：{{ butindex}}</div>
        <div class="img wenzi">
          <div class="tp"
               v-show="bian==0">
            <span>宠物图片：</span>
            <img :src="petimg"
                 alt="">
          </div>
          <div class="xz_img"
               v-if="bian==1">
            <span>选择图片:</span>

            <el-upload ref="fileList"
                       v-model:file-list="files"
                       :action="`http://localhost:3000/api/adoptimg?pet_id=${butindex}&zuo=1`"
                       list-type="picture-card"
                       :on-preview="handlePictureCardPreview"
                       :on-remove="handleRemove"
                       :limit="1"
                       name="files"
                       :auto-upload="false"
                       class="avatar-uploader">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible"
                       class="dx">
              <img width="100%"
                   :src="dialogImageUrl"
                   alt="" />
            </el-dialog>

          </div>
          <el-button size="small"
                     @click="bian_img(1)"
                     v-if="bian==0">更换</el-button>
          <el-button size="small"
                     @click="ensuer_img(0)"
                     v-if="bian==1">确定</el-button>
        </div>
        <div class="name wenzi">
          <div>
            <span>宠物名字：</span>
            <span v-if="bian1==0">{{ petname }}</span>
            <el-input v-model="petname"
                      maxlength="7"
                      show-word-limit
                      style="width: 240px"
                      clearable
                      v-if="bian1==1" />
          </div>
          <el-button size="small"
                     @click="bian_name(1)"
                     v-if="bian1==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian1==1"
                     @click="ensuer_name(0)">确定</el-button>
        </div>
        <div class="name wenzi">
          <div>
            <span>宠物年龄：</span>
            <span v-if="bian8==0">{{ petage }}</span>
            <el-input v-model="petage"
                      style="width: 240px"
                      clearable
                      v-if="bian8==1" />
          </div>
          <el-button size="small"
                     @click="bian_age(1)"
                     v-if="bian8==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian8==1"
                     @click="ensuer_age(0)">确定</el-button>
        </div>
        <div class="leixing wenzi">
          <div>
            <span>宠物类型：</span>
            <span v-if="bian2==0">{{ pettype }}</span>
            <el-tree-select v-model="pettype"
                            :data="type_data"
                            :render-after-expand="false"
                            style="width: 120px"
                            v-if="bian2==1" />
          </div>
          <el-button size="small"
                     @click="bian_type(1)"
                     v-if="bian2==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian2==1"
                     @click="ensuer_type(0)">确定</el-button>
        </div>
        <div class="sex wenzi">
          <div>
            <span>宠物性别：</span>
            <span v-if="bian3==0">{{ petsex}}</span>
            <el-tree-select v-model="petsex"
                            :data="sex_data"
                            :render-after-expand="false"
                            style="width: 120px"
                            v-if="bian3==1" />
          </div>
          <el-button size="small"
                     @click="bian_sex(1)"
                     v-if="bian3==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian3==1"
                     @click="ensuer_sex(0)">确定</el-button>
        </div>
        <div class="jueyu wenzi">
          <div>
            <span>是否绝育：</span>
            <span v-if="bian4==0">{{ petsterilization }}</span>
            <el-tree-select v-model="petsterilization"
                            :data="ym_data"
                            :render-after-expand="false"
                            style="width: 120px"
                            v-if="bian4==1" />
          </div>
          <el-button size="small"
                     @click="bian_jy(1)"
                     v-if="bian4==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian4==1"
                     @click="ensuer_jy(0)">确定</el-button>
        </div>
        <div class="yimiao wenzi">
          <div>
            <span>是否打疫苗：</span>
            <span v-if="bian5==0">{{ pethealth}}</span>
            <el-tree-select v-model="pethealth"
                            :data="ym_data"
                            :render-after-expand="false"
                            style="width: 120px"
                            v-if="bian5==1" />
          </div>
          <el-button size="small"
                     @click="bian_ym(1)"
                     v-if="bian5==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian5==1"
                     @click="ensuer_ym(0)">确定</el-button>
        </div>
        <div class="quyu wenzi">
          <div>
            <span>发现区域：</span>
            <span v-if="bian6==0">{{ petregion }}</span>
            <el-input v-model="petregion"
                      v-if="bian6==1"
                      style="width: 240px"
                      autosize
                      clearable />
          </div>
          <el-button size="small"
                     @click="bian_qy(1)"
                     v-if="bian6==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian6==1"
                     @click="ensuer_qy(0)">确定</el-button>
        </div>
        <div class="miaoshu wenzi">
          <div>
            <span>宠物描述：</span>
            <span v-if="bian7==0">{{ petbriefing }}</span>
            <el-input v-model="petbriefing"
                      v-if="bian7==1"
                      maxlength="100"
                      show-word-limit
                      style="width: 300px"
                      :autosize="{ minRows: 1, maxRows: 4 }"
                      type="textarea" />
          </div>
          <el-button size="small"
                     @click="bian_ms(1)"
                     v-if="bian7==0">编辑</el-button>
          <el-button size="small"
                     v-if="bian7==1"
                     @click="ensuer_ms(0)">确定</el-button>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="cha()">
            修改完成
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加宠物弹出层 -->
    <el-dialog v-model="centerDialogVisible1"
               width="500"
               center
               @close="cha1"
               :close-on-click-modal="false">

      <div class="pets">

        <div class="img wenzi">

          <div class="xz_img">
            <span>选择图片:</span>

            <el-upload ref="fileList"
                       v-model:file-list="files"
                       :action="`http://localhost:3000/api/adoptimg?pet_id=${butindex}&zuo=1`"
                       list-type="picture-card"
                       :on-preview="handlePictureCardPreview"
                       :on-remove="handleRemove"
                       :limit="1"
                       name="files"
                       :auto-upload="false"
                       class="avatar-uploader">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible"
                       class="dx">
              <img width="100%"
                   :src="dialogImageUrl"
                   alt="" />
            </el-dialog>

          </div>

        </div>
        <div class="name wenzi">
          <div>
            <span>宠物名字：</span>
            <el-input v-model="petname"
                      maxlength="7"
                      show-word-limit
                      style="width: 240px"
                      clearable />
          </div>
        </div>
        <div class="name wenzi">
          <div>
            <span>宠物年龄：</span>
            <el-input v-model="petage"
                      placeholder="xx岁或xx-xx岁"
                      style="width: 240px"
                      clearable />
          </div>
        </div>
        <div class="leixing wenzi">
          <div>
            <span>宠物类型：</span>
            <el-tree-select v-model="pettype"
                            :data="type_data"
                            placeholder="选择类型"
                            :render-after-expand="false"
                            style="width: 120px" />
          </div>

        </div>
        <div class="sex wenzi">
          <div>
            <span>宠物性别：</span>
            <el-tree-select v-model="petsex"
                            placeholder="选择性别"
                            :data="sex_data"
                            :render-after-expand="false"
                            style="width: 120px" />
          </div>

        </div>
        <div class="jueyu wenzi">
          <div>
            <span>是否绝育：</span>
            <el-tree-select v-model="petsterilization"
                            :data="ym_data"
                            placeholder="选择是否"
                            :render-after-expand="false"
                            style="width: 120px" />
          </div>

        </div>
        <div class="yimiao wenzi">
          <div>
            <span>是否打疫苗：</span>
            <el-tree-select v-model="pethealth"
                            placeholder="选择是否"
                            :data="ym_data"
                            :render-after-expand="false"
                            style="width: 120px" />
          </div>

        </div>
        <div class="quyu wenzi">
          <div>
            <span>发现区域：</span>
            <el-input v-model="petregion"
                      style="width: 240px"
                      autosize
                      clearable />
          </div>

        </div>
        <div class="miaoshu wenzi">
          <div>
            <span>宠物描述：</span>
            <el-input v-model="petbriefing"
                      maxlength="100"
                      show-word-limit
                      style="width: 300px"
                      :autosize="{ minRows: 1, maxRows: 4 }"
                      type="textarea" />
          </div>

        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cha1()">取 消</el-button>
          <el-button type="primary"
                     @click="queding()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 删除宠物弹出层 -->
    <el-dialog v-model="shan"
               :close-on-click-modal="false"
               :title="Warning"
               width="500"
               center>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="shan = false,butindex=''">取消</el-button>
          <el-button type="primary"
                     @click="shanchu()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import axios from '@/axios'
let list = ref([])
let userlist = ref([])

let currentPage = ref(1)
let pageSize = ref(7)
let currentPageData = ref([])

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  handleCurrentChange(currentPage.value)
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  const start = (newPage - 1) * pageSize.value
  const end = start + pageSize.value
  currentPageData.value = userlist.value.slice(start, end)
}
/**
 *
 * 图片上传
 */

//文件列表
let files = ref([])
//ref绑定，可以访问el-upload自己的方法
let fileList = ref('')
//预览图片文件名
let dialogImageUrl = ref('')
//预览展示
let dialogVisible = ref(false)
//删除已选择的文件
let handleRemove = () => {
  // console.log(file, fileList)
  // 可以在这里添加额外的删除逻辑，比如从服务器删除文件等
}
//从列表赋值给预览图片
let handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

/**
 *
 * 图片上传
 */
//搜索
let sousuo = ref('')
const search = () => {
  if (sousuo.value == '') {
    ElMessage({
      message: '搜索内容为空，请重新输入。',
      type: 'error'
    })
  } else {
    userlist.value = list.value.filter((item) => {
      return item.petname.includes(sousuo.value) || item.pet_id == sousuo.value
    })
    handleCurrentChange(currentPage.value)
    if (userlist.value.length == 0) {
      userlist.value = list.value
      handleCurrentChange(currentPage.value)
      ElMessage({
        message: '未找到相关内容，请重新输入。',
        type: 'error'
      })
    }
  }
}
const chongzhi = () => {
  userlist.value = list.value
  handleCurrentChange(currentPage.value)
  sousuo.value = ''
}
// 宠物信息
// let petxin = ref('')
// 宠物图片
let petimg = ref('')
// 宠物名字
let petname = ref('')
//宠物性别
let petsex = ref('')
//宠物年龄
let petage = ref('')
//宠物类型
let pettype = ref('')
//宠物绝育
let petsterilization = ref('')
//宠物疫苗
let pethealth = ref('')
//宠物发现区域
let petregion = ref('')
//宠物描述
let petbriefing = ref('')

// 添加宠物
let centerDialogVisible1 = ref(false)

const add = () => {
  centerDialogVisible1.value = true
}
const queding = () => {
  if (files.value.length == 0) {
    ElMessage({
      message: '请上传宠物图片！',
      type: 'error'
    })
  } else if (petname.value == '') {
    ElMessage({
      message: '宠物名字不能为空！',
      type: 'error'
    })
  } else if (petsex.value == '') {
    ElMessage({
      message: '宠物性别不能为空！',
      type: 'error'
    })
  } else if (petage.value == '') {
    ElMessage({
      message: '宠物年龄不能为空！',
      type: 'error'
    })
  } else if (pettype.value == '') {
    ElMessage({
      message: '宠物类型不能为空！',
      type: 'error'
    })
  } else if (petsterilization.value == '') {
    ElMessage({
      message: '宠物绝育情况不能为空！',
      type: 'error'
    })
  } else if (pethealth.value == '') {
    ElMessage({
      message: '宠物疫苗情况不能为空！',
      type: 'error'
    })
  } else if (petregion.value == '') {
    ElMessage({
      message: '宠物发现区域不能为空！',
      type: 'error'
    })
  } else if (petbriefing.value == '') {
    ElMessage({
      message: '宠物描述不能为空！',
      type: 'error'
    })
  } else {
    axios
      .post('/tianadopt', {
        petname: petname.value,
        gender: petsex.value,
        age: petage.value,
        breed: pettype.value,
        sterilization: petsterilization.value,
        health: pethealth.value,
        region: petregion.value,
        briefing: petbriefing.value
      })
      .then((d) => {
        butindex.value = d[1].insertId
        if (d[0] == '添加成功！') {
          sousuo.value = ''
          const loading = ElLoading.service({
            lock: true,
            text: '信息提交中，请稍后...',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          setTimeout(() => {
            loading.close()
            ElMessage({
              message: '宠物添加成功！',
              type: 'success'
            })
            cha1()
            axios
              .get('/lingyanglist')
              .then((d) => {
                //过滤数据
                list.value = d.filter((item) => {
                  return (
                    item.status == '待领养' ||
                    item.status == '待审核' ||
                    item.status == '审核通过，待领养'
                  )
                })
                userlist.value = list.value
                handleCurrentChange(currentPage.value)
                // console.log(userlist.value)
              })
              .catch((err) => console.log(err))
          }, 2000)
          setTimeout(() => {
            fileList.value.submit()
          }, 100)
        }
      })
      .catch((err) => console.log(err))
  }
  sousuo.value = ''
}
//编辑
let butindex = ref('')
let centerDialogVisible = ref(false)

//编辑
const handleEdit = (index) => {
  butindex.value = index
  list.value.forEach((item) => {
    if (item.pet_id == index) {
      petimg.value = item.image
      petname.value = item.petname
      petsex.value = item.gender
      petage.value = item.age
      pettype.value = item.breed
      petsterilization.value = item.sterilization
      pethealth.value = item.health
      petregion.value = item.region
      petbriefing.value = item.briefing
    }
  })

  centerDialogVisible.value = true
}

//宠物图片修改
let bian = ref(0)
let bian_img = (index) => {
  bian.value = index
}

let ensuer_img = (index) => {
  bian.value = index
  if (files.value.length > 0) {
    fileList.value.submit()
    fileList.value.handleRemove(files.value)
    files.value = []
    ElMessage({
      message: '图片更换成功！',
      type: 'success'
    })
    setTimeout(() => {
      axios
        .get('/lingyanglist')
        .then((d) => {
          //过滤数据
          list.value = d.filter((item) => {
            return (
              item.status == '待领养' ||
              item.status == '待审核' ||
              item.status == '审核通过，待领养'
            )
          })
          userlist.value = list.value
          handleCurrentChange(currentPage.value)
          // console.log(userlist.value)
          list.value.forEach((item) => {
            if (item.pet_id == butindex.value) {
              petimg.value = item.image
            }
          })
        })
        .catch((err) => console.log(err))
    }, 10)
  }
}
const pet_xinxi = (data, index, panduan) => {
  axios
    .post('/xiuadopt', { pet_id: butindex.value, datas: data, ziduan: index })
    .then((d) => {
      if (d == `${panduan}修改成功！`) {
        sousuo.value = ''
        ElMessage({
          message: `${panduan}修改成功`,
          type: 'success'
        })
      }
      setTimeout(() => {
        axios
          .get('/lingyanglist')
          .then((d) => {
            //过滤数据
            list.value = d.filter((item) => {
              return (
                item.status == '待领养' ||
                item.status == '待审核' ||
                item.status == '审核通过，待领养'
              )
            })
            userlist.value = list.value
            handleCurrentChange(currentPage.value)
            // console.log(userlist.value)
            list.value.forEach((item) => {
              if (item.pet_id == butindex.value) {
                petimg.value = item.image
                petname.value = item.petname
                petsex.value = item.gender
                petage.value = item.age
                pettype.value = item.breed
                petsterilization.value = item.sterilization
                pethealth.value = item.health
                petregion.value = item.region
                petbriefing.value = item.briefing
              }
            })
          })
          .catch((err) => console.log(err))
      }, 10)
    })
    .catch((err) => console.log(err))
  sousuo.value = ''
}
//宠物名字修改
let bian1 = ref(0)
let bian_name = (index) => {
  bian1.value = index
}

let ensuer_name = (index) => {
  if (petname.value != '') {
    bian1.value = index
    pet_xinxi(petname.value, 1, '宠物名字')
  } else {
    ElMessage({
      message: '宠物名字不能为空',
      type: 'error'
    })
  }
}
//宠物年龄修改
let bian8 = ref(0)
let bian_age = (index) => {
  bian8.value = index
}

let ensuer_age = (index) => {
  if (petage.value != '') {
    bian8.value = index
    pet_xinxi(petage.value, 8, '宠物年龄')
  } else {
    ElMessage({
      message: '宠物年龄不能为空',
      type: 'error'
    })
  }
}
//宠物种类修改
let bian2 = ref(0)
const type_data = [
  {
    value: '其他',
    label: '其他'
  },
  {
    value: '狗狗',
    label: '狗狗'
  },
  {
    value: '猫咪',
    label: '猫咪'
  }
]
let bian_type = (index) => {
  bian2.value = index
}

let ensuer_type = (index) => {
  if (petname.value != '') {
    bian2.value = index
    pet_xinxi(pettype.value, 2, '宠物类型')
  } else {
    ElMessage({
      message: '宠物名字不能为空',
      type: 'error'
    })
  }
}
//宠物性别修改
let bian3 = ref(0)
const sex_data = [
  {
    value: '公',
    label: '公'
  },
  {
    value: '母',
    label: '母'
  }
]
let bian_sex = (index) => {
  bian3.value = index
}

let ensuer_sex = (index) => {
  bian3.value = index
  pet_xinxi(petsex.value, 3, '宠物性别')
}
//宠物绝育修改
let bian4 = ref(0)
const ym_data = [
  {
    value: '是',
    label: '是'
  },
  {
    value: '否',
    label: '否'
  }
]
let bian_jy = (index) => {
  bian4.value = index
}

let ensuer_jy = (index) => {
  bian4.value = index
  pet_xinxi(petsterilization.value, 4, '宠物是否绝育')
}
//宠物疫苗修改
let bian5 = ref(0)

let bian_ym = (index) => {
  bian5.value = index
}

let ensuer_ym = (index) => {
  bian5.value = index
  pet_xinxi(pethealth.value, 5, '宠物是否打疫苗')
}
//宠物区域修改
let bian6 = ref(0)
let bian_qy = (index) => {
  bian6.value = index
}

let ensuer_qy = (index) => {
  if (petregion.value != '') {
    bian6.value = index
    pet_xinxi(petregion.value, 6, '宠物区域')
  } else {
    ElMessage({
      message: '内容不能为空',
      type: 'error'
    })
  }
} //宠物描述修改
let bian7 = ref(0)
let bian_ms = (index) => {
  bian7.value = index
}

let ensuer_ms = (index) => {
  if (petbriefing.value != '') {
    bian7.value = index
    pet_xinxi(petbriefing.value, 7, '宠物描述')
  } else {
    ElMessage({
      message: '内容不能为空',
      type: 'error'
    })
  }
}
//删除
let shan = ref(false)
let Warning = ref('')
const handleDelete = (index) => {
  butindex.value = index
  shan.value = true
  Warning.value = `确定删除宠物${index}吗？`
}
const shanchu = () => {
  axios
    .post('/petshan', { pet_id: butindex.value })
    .then((d) => {
      if (d == `宠物删除成功！`) {
        ElMessage({
          message: `删除成功`,
          type: 'success'
        })
        setTimeout(() => {
          shan.value = false
          axios
            .get('/lingyanglist')
            .then((d) => {
              //过滤数据
              list.value = d.filter((item) => {
                return (
                  item.status == '待领养' ||
                  item.status == '待审核' ||
                  item.status == '审核通过，待领养'
                )
              })
              userlist.value = list.value
              handleCurrentChange(currentPage.value)
            })
            .catch((err) => console.log(err))
        }, 100)
      }
    })
    .catch((err) => console.log(err))
  sousuo.value = ''
}
let cha = () => {
  centerDialogVisible.value = false
  bian.value = 0
  bian1.value = 0
  bian2.value = 0
  bian3.value = 0
  bian4.value = 0
  bian5.value = 0
  bian6.value = 0
  bian7.value = 0
  files.value = []
  petimg.value = ''
  petname.value = ''
  petsex.value = ''
  petage.value = ''
  pettype.value = ''
  petsterilization.value = ''
  pethealth.value = ''
  petregion.value = ''
  petbriefing.value = ''
  sousuo.value = ''
}
let cha1 = () => {
  centerDialogVisible1.value = false
  files.value = []
  petimg.value = ''
  petname.value = ''
  petsex.value = ''
  petage.value = ''
  pettype.value = ''
  petsterilization.value = ''
  pethealth.value = ''
  petregion.value = ''
  petbriefing.value = ''
  sousuo.value = ''
}
onMounted(() => {
  axios
    .get('/lingyanglist')
    .then((d) => {
      //过滤数据
      list.value = d.filter((item) => {
        return (
          item.status == '待领养' || item.status == '待审核' || item.status == '审核通过，待领养'
        )
      })
      userlist.value = list.value
      handleCurrentChange(currentPage.value)
      // console.log(userlist.value)
    })
    .catch((err) => console.log(err))
})
</script>

<style scoped lang="less">
.sousuo {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.tian {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
.pets {
  width: 100%;
  .img {
    display: flex;
    align-items: center;
    .tp {
      display: flex;
      align-items: center;
    }
    .xz_img {
      width: 100%;
      display: flex;
    }
    .dx {
      height: 100px;

      width: 100px;
    }

    ::v-deep .el-upload-list--picture-card .el-upload--picture-card {
      height: 100px;
      width: 100px;
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item {
      height: 100px !important;
      width: 100px !important;
    }
    img {
      width: 150px;
      height: 80px;
    }
  }
  .wenzi {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 5px 10px;
    border-bottom: 1px solid #666;
  }
  .wenzi:hover {
    background-color: #eee;
  }
}
</style>
